<template>
<div class="header">
  <el-row>
    <el-col :span="16">
      <div class="logo">
        <div>
          <img
            style="width: 30px;position: relative;top:5px;border-radius: 5px;right: 10px;"
            src="@/assets/logo.png"
            alt="Element logo"
          />
          <el-text class="mx-1" size="normal">XXXXXXXXXX商城</el-text>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        :router="true"
        @select="handleSelect"
      >
        <el-menu-item index="/HomeMain">
          首页
        </el-menu-item>
        <el-menu-item index="/shoppingCart">购物车</el-menu-item>
        <el-menu-item index="/collection">收藏</el-menu-item>
        <el-menu-item index="/order">订单</el-menu-item>
        <el-menu-item index="/member">会员中心</el-menu-item>
        <el-sub-menu index="/">
          <template #title>我的</template>
          <el-menu-item index="/userInfo">信息修改</el-menu-item>
          <el-menu-item index="/login">退出登录</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const input2 = ref('')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped lang="scss">
.header{
  position: fixed;
  width: 100%;
  height: 44px;
  top: 0;
  left: 0;
  background: white;
  opacity: 0.9;
  z-index: 100;
}

.el-row{
  width: 1200px;
  margin: 0 auto;
}
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
.logo{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-content: center;
  padding:0 20px;
  line-height: 40px;
}
.el-menu-demo{
  border-bottom: none;
  justify-content: right;
  height: 40px;
}
</style>
